<template>
  <md-nav-bar title="报名人列表" :showLeft="false" />
  <view class="container">
    <view class="card" v-for="item in data.list" :key="item.id" @click="() => handleSelect(item)">
      <uni-section class="section" :title="item.truename" :sub-title="item.mobile" type="line">
        <view class="content flex-l">
          <uni-tag :text="item.sex == 1 ? '男' : '女'" :custom-style="data.customStyle" />
          <uni-tag :text="item.birth" :custom-style="data.customStyle" />
          <uni-tag v-show="item?.size" :text="item.size" :custom-style="data.customStyle" />
        </view>
        <view class="bottom-action flex-l">
          <view @click.stop="() => handleEdit(item)"><uni-tag circl text="编辑" type="success" size="mini" /></view>
          <view @click.stop="() => handleDel(item.id)">
            <uni-tag circl text="删除" type="error" size="mini" class="m-left-20" />
          </view>
        </view>
      </uni-section>
    </view>
    <mescroll-empty v-if="data.list.length == 0"></mescroll-empty>
    <md-button class="add-btn" @click="handleAdd">+新增报名人</md-button>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
// 接口
import { userSignDel, userSignIndex } from './service';
// 工具
import { Toast } from '@/utils/util';
import type { UserSign } from '@/api/data';

interface DataType {
  type?: string; // 选择列表（select）或者浏览的列表（空）
  customStyle: any;
  list: UserSign.Index.Data[];
}

const data = reactive<DataType>({
  type: '', //
  customStyle: `background-color: #F7F7F7; border-color: #F7F7F7; color: #333333; margin-right: 10rpx;`,
  list: [],
});

// 删除
const handleDel = (id: number) => {
  uni.showModal({
    title: '提示',
    content: '是否删除该报名人',
    success: res => {
      if (res.confirm) {
        fetchUserSignDel(id);
      }
    },
  });
};

// 新增报名人
const handleAdd = () => {
  uni.navigateTo({
    url: '/pages/outside-h5/registration?type=add',
  });
};

// 选中报名人
const handleSelect = (item: DataType['list'][number]) => {
  if (data.type !== 'select') return;
  uni.setStorageSync('selectUser', JSON.stringify(item));
  uni.navigateBack();
};

// 编辑
const handleEdit = (item: any) => {
  uni.navigateTo({
    url: '/pages/outside-h5/registration?type=edit&info=' + JSON.stringify(item),
  });
};

/**
 * 接口相关
 */
// 报名人列表
const fetchUserSignIndex = async () => {
  try {
    const res = await userSignIndex();
    data.list = res.data;
  } catch (error) {}
};

// 报名人删除
const fetchUserSignDel = async (id: number) => {
  try {
    await userSignDel({ id });
    Toast('删除成功');
    fetchUserSignIndex();
  } catch (error) {}
};

onLoad(option => {
  data.type = option?.type;
});

onShow(() => {
  fetchUserSignIndex();
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  & > view {
    margin-bottom: 20rpx;
  }
  .add-btn {
    background: #ffffff;
    color: $normal;
    font-size: $fs-28;
    line-height: 88rpx;
  }
  .card {
    width: 690rpx;
    // height: 100%;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;
    .section {
      border-radius: 20rpx;
      .icon {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .content {
      padding: 0 20px;
    }
    .tag {
      padding: 0 4rpx;
      height: 40rpx;
      line-height: 40rpx;
      background: #f7f7f7;
      border-radius: 20rpx;
    }
  }
  .bottom-action {
    margin-top: 12px;
    justify-content: flex-end;
    padding: 0 20px 20rpx 20px;
  }
}
</style>
